.v-popper--theme-tooltip
  $background = $vue-ui-gray-800
  $dark-background = $vue-ui-white
  $color = $vue-ui-white
  $dark-color = $vue-ui-gray-800

  font-size 14px

  .v-popper__inner
    background $background
    color $color
  
  .v-popper__arrow
    border-color $background

  .vue-ui-dark-mode &
    .v-popper__inner
      background $dark-background
      color $dark-color
    
    .v-popper__arrow
      border-color $dark-background

.v-popper--theme-dropdown
  $background = $vue-ui-white
  $dark-background = $vue-ui-gray-900
  $color = $vue-ui-gray-800
  $dark-color = $vue-ui-white

  .v-popper__inner
    background $background
    color $color
    padding 4px 0
    box-shadow 0 0 3px rgba(black, .05), 0 10px 30px rgba(black, .1)
  
  .v-popper__arrow
    border-color $background

  .vue-ui-dark-mode &
    .v-popper__inner
      background $dark-background
      color $dark-color
    
    .v-popper__arrow
      border-color $dark-background

  &[data-popper-placement^='top']
    .v-popper__arrow
      filter drop-shadow(0 3px 3px rgba(black, .15))
  &[data-popper-placement^='bottom']
    .v-popper__arrow
      filter drop-shadow(0 -3px 3px rgba(black, .15))
  &[data-popper-placement^='left']
    .v-popper__arrow
      filter drop-shadow(3px 0 3px rgba(black, .15))
  &[data-popper-placement^='right']
    .v-popper__arrow
      filter drop-shadow(-3px 0 3px rgba(black, .15))

  // Animation
  &.v-popper__popper--show-to,
  &.v-popper__popper--hide-to
    > .v-popper__wrapper
      transition transform .12s ease-out

  &.v-popper__popper--show-from,
  &.v-popper__popper--hide-to
    &[data-popper-placement^='top']
      > .v-popper__wrapper
        transform translateY(6px)
    &[data-popper-placement^='bottom']
      > .v-popper__wrapper
        transform translateY(-6px)
    &[data-popper-placement^='left']
      > .v-popper__wrapper
        transform translateX(6px)
    &[data-popper-placement^='right']
      > .v-popper__wrapper
        transform translateX(-6px)